<!--
 * @Author: cest
 * @Date: 2022-08-09 13:56:27
 * @LastEditTime: 2022-08-09 18:48:58
 * @LastEditors: cest
 * @FilePath: /nuxt3-vite/pages/blog/list/index.vue
 * @Description: 编辑描述内容
-->
<script setup lang="ts">
// 在特定页面使用 definePageMeta() 方法为该页面所对应的路由添加元信息
definePageMeta({

  // Nuxt 提供了一个可定制的布局架构，您可以在整个应用程序中使用它，非常适合将常见的 UI 或代码模式提取到可重用的布局组件中。
  //
  // 页面布局放置在 layouts/ 目录中，使用时会通过异步导入自动加载。 如果你创建了一个 layouts/default.vue 这将用于你应用中的所有页面。
  //
  // 通过将 layout 属性设置为组件选项的一部分来使用其他布局。

  // 使用 blog 布局
  layout: 'blog',
})
</script>

<template lang="pug">
.list.mt-5.text-base.prose.prose-truegra
  .article.m-3(v-for="item in 10" :key="item")
    .article__inner.p-3.overflow-hidden
      .background-cover(class="sm:w-full")
        a(href="" title="封面")
          img(src="~/assets/img/bg-11.jpg" alt="封面", srcset="")
      header.article__head.pb-1
        h1(itemprop="name")
          a.article-title(href="javascript:;") nuxt.js使用介绍
      .article__body.my-3
        p vue全家桶还算是比较全面的，从构建工具vue-cli、vite，到vue-router、vuex、element-ui，vue-dev-tools，最后服务器渲染方案nuxt.js等等构成了一个完整的开发生态，用着还是比较省心的。总结一下nux.js用法以供参考。
      .article__foot.py-3.overflow-hidden
        .article-tag
          .tag
            a.color0(href="javascript:;") web
        .article-tag
          .tag
            a.color1(href="javascript:;") web
        .article-more-link
          a(href="javascript:;") 更多 >>
</template>

<style lang="styl" src='./styl/index.styl' scoped />
